@import "ponysdk.less";



.widget {
	width: 300px;
	height: 160px;
	position: relative;
	cursor: move;
	.label {
		color: @grayDark;
		text-shadow: @black 0 1px;
	}
	
	&.dragenter {
		-moz-box-shadow:0px 0px 10px 4px #ffbb00;
		-webkit-box-shadow:0px 0px 10px 4px #ffbb00;
		box-shadow:0px 0px 10px 4px #ffbb00;
	}
	float: left;
	margin-right:20px;
	margin-bottom:20px;
}


.background {
	width: 300px;
	height: 160px;
	position: absolute;
	left: 0px;
	top: 0px;
	-moz-box-shadow: 1px 1px 10px 3px rgba(119, 119, 119, 0.92);
	-webkit-box-shadow: 1px 1px 10px 3px rgba(119, 119, 119, 0.92);
	box-shadow: 1px 1px 10px 3px rgba(119, 119, 119, 0.92);
}

.ios_background {
	margin:10px;
	width: 640px;
	height: 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	-moz-box-shadow: 1px 1px 10px 3px rgba(119, 119, 119, 0.92);
	-webkit-box-shadow: 1px 1px 10px 3px rgba(119, 119, 119, 0.92);
	box-shadow: 1px 1px 10px 3px rgba(119, 119, 119, 0.92);
}

.head_inline {
	width: 300px;
	height: 20px;
	background-color: #efefef;
	position: absolute;
	left: 0px;
	top: 0px;
}

.ios_head_inline {
	width: 640px;
	height: 45px;
	background-color: #efefef;
	position: absolute;
	left: 10px;
	top: 10px;
}

.icon {
	width: 16px;
	height: 16px;
	background:url("../images/fx.png");
	position: absolute;
	left: 2px;
	top: 2px
}

.header {
	width: 262px;
	height: 15px;
	font-weight: 900;
	position: absolute;
	left: 19px;
	top: 2px;
	text-align: center;
	vertical-align: middle;
}
.ios_header {
	width: 640px;
	height: 45px;
	font-weight: 900;
	position: absolute;
	left: 0px;
	top: 10px;
	text-align: center;
	vertical-align: middle;
}

.close {
	width: 16px;
	height: 16px;
	background:url("../images/close.png");
	position: absolute;
	right: 2px;
	top: 2px;
}

.chart {
	position: absolute;
	width: 16px;
	height: 16px;
	background:url("../images/chart_16.png");
	right: 5px;
	bottom: 2px;
}

.live_chart {
	position: absolute;
	width: 16px;
	height: 16px;
	background:url("../images/livechart_16.png");
	right: 30px;
	bottom: 2px;
}

.ios_row{
	position:relative;
	width:99%;
	height:100px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:1px solid grey;
	margin:5px;
}

.ios_securityName{
	position: absolute;
	left:5px;
	top:5px;
	font-size:80px;
}

.ios_chart {
		z-index:2;
	position: absolute;
	width: 64px;
	height: 64px;
	background:url("../images/chart_64.png");
	right: 50px;
	top: 25px;
}

.ios_live_chart {
	z-index:2;
	position: absolute;
	width: 64px;
	height: 64px;
	background:url("../images/livechart_64.png");
	right: 150px;
	top: 25px;
}

.ios_trade{
	z-index:2;
	position: absolute;
	width: 64px;
	height: 64px;
	background:url("../images/trade_64.png");
	right: 230px;
	top: 25px;
}

.ios_buy_price{
	position: absolute;
	right:500px;
	top: 0px;
	font-size:80px;
	font-weight:900;
}

.ios_price_separator{
	position: absolute;
	right:450px;
	top: 0px;
	font-size:80px;
	font-weight:900;
}
.ios_sell_price{
	position: absolute;
	right:350px;
	top: 0px;
	font-size:80px;
	font-weight:900;
}

.ios_bg1{
	background-color:#cfd3d6;
	z-index:1;
	position: absolute;
	top:0px;
	right:0px;
	width:300px;
	height:100px;
}
.ios_bg2{
}
.ios_bg3{
}


.ios_up{
	color:green;
}
.ios_down{
	color:red;
}

.ios_widget{
	width: 640px;
	height: 300px;
	position: relative;
	.label {
		color: @grayDark;
		text-shadow: @black 0 1px;
	}
	float: left;
	margin-right:20px;
	margin-bottom:20px;
}

.ios_action{
	position:relative;
	width:100%;
	height: 100px;
	background: rgb(76,76,76); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

.ios_back{
	position:absolute;
	left:5px;
	top:2px;
	color:white;
	font-weight:900;
	font-size:70px;
	margin:5px;
}

.buy {
	width: 125px;
	height: 100px;
	position: absolute;
	left: 10px;
	top: 30px;
	background: rgb(240,183,161); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */

	-moz-border-radius: 10px;
	border-radius: 10px;
	cursor: pointer;
}

.ios_buy {
	width: 280px;
	height: 200px;
	position: absolute;
	left: 20px;
	top: 100px;
	background: rgb(109,179,242); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,179,242,1)), color-stop(50%,rgba(84,163,238,1)), color-stop(51%,rgba(54,144,240,1)), color-stop(100%,rgba(30,105,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	cursor: pointer;
}

.buy_pip_head {
	position: absolute;
	left: 13px;
	top: 30px;
}
.ios_buy_pip_head {
	position: absolute;
	left: 30px;
	top: 100px;
}

.buy_num {
	position: absolute;
	left: 40px;
	top: 50px;
}
.ios_buy_num {
	position: absolute;
	left: 110px;
	top: 140px;
	font-size:20px;
}

.buy_pip_num {
	position: absolute;
	left: 40px;
	top: 60px;
}
.ios_buy_pip_num {
	position: absolute;
	left: 100px;
	top: 140px;
}

.buy_pip_num strong {
	font-size: 30px;
}

.ios_buy_pip_num_strong {
	font-size: 80px;
}

.sell {
	width: 125px;
	height: 100px;
	background-color: green;
	position: absolute;
	right: 10px;
	top: 30px;
	background: rgb(191,210,85);
	background: -moz-linear-gradient(top,  rgb(191,210,85) 0%, rgb(142,185,42) 50%, rgb(114,170,0) 51%, rgb(158,203,45) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,210,85)), color-stop(50%,rgb(142,185,42)), color-stop(51%,rgb(114,170,0)), color-stop(100%,rgb(158,203,45)));
	background: -webkit-linear-gradient(top,  rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
	background: -o-linear-gradient(top,  rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
	background: -ms-linear-gradient(top,  rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
	background: linear-gradient(to bottom,  rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	cursor: pointer;
}
.ios_sell {
	width: 280px;
	height: 200px;
	background-color: green;
	position: absolute;
	right: 5px;
	top: 100px;
	background: rgb(191,210,85);
	background: -moz-linear-gradient(top,  rgb(191,210,85) 0%, rgb(142,185,42) 50%, rgb(114,170,0) 51%, rgb(158,203,45) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,210,85)), color-stop(50%,rgb(142,185,42)), color-stop(51%,rgb(114,170,0)), color-stop(100%,rgb(158,203,45)));
	background: -webkit-linear-gradient(top,  rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
	background: -o-linear-gradient(top,  rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
	background: -ms-linear-gradient(top,  rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
	background: linear-gradient(to bottom,  rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	cursor: pointer;
}

.sell_pip_head {
	position: absolute;
	left: 170px;
	top: 30px;
}
.ios_sell_pip_head {
	position: absolute;
	left: 360px;
	top: 100px;
}
.sell_num {
	position: absolute;
	left: 230px;
	top: 50px;
}
.ios_sell_num {
	position: absolute;
	left: 455px;
	top: 140px;
	font-size:20px;
}
.sell_pip_num {
	position: absolute;
	left: 230px;
	top: 60px;
}
.ios_sell_pip_num {
	position: absolute;
	left: 455px;
	top: 140px;
}
.sell_pip_num strong {
	font-size: 30px;
}
.ios_sell_pip_num_strong {
	font-size: 80px;
}

.amtlabel {
	position: absolute;
	left: 10px;
	top: 140px;
}
.ios_amtlabel {
	position: absolute;
	left: 20px;
	top: 350px;
}

.spread {
	width: 60px;
	height: 20px;
	background-color: yellow;
	position: absolute;
	left: 119px;
	top: 70px;
	text-align: center;
	vertical-align: middle;
	background: rgb(255,252,252);
	background: -moz-linear-gradient(top,  rgb(255,252,252) 0%, rgb(142,185,42) 7%, rgb(114,170,0) 93%, rgb(255,255,255) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,252,252)), color-stop(7%,rgb(142,185,42)), color-stop(93%,rgb(114,170,0)), color-stop(100%,rgb(255,255,255)));
	background: -webkit-linear-gradient(top,  rgb(255,252,252) 0%,rgb(142,185,42) 7%,rgb(114,170,0) 93%,rgb(255,255,255) 100%);
	background: -o-linear-gradient(top,  rgb(255,252,252) 0%,rgb(142,185,42) 7%,rgb(114,170,0) 93%,rgb(255,255,255) 100%);
	background: -ms-linear-gradient(top,  rgb(255,252,252) 0%,rgb(142,185,42) 7%,rgb(114,170,0) 93%,rgb(255,255,255) 100%);
	background: linear-gradient(to bottom,  rgb(255,252,252) 0%,rgb(142,185,42) 7%,rgb(114,170,0) 93%,rgb(255,255,255) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcfc', endColorstr='#ffffff',GradientType=0 );
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.ios_spread {
	width: 180px;
	height: 50px;
	background-color: yellow;
	position: absolute;
	left: 240px;
	top: 170px;
	text-align: center;
	vertical-align: middle;
	background: rgb(255,252,252);
	background: -moz-linear-gradient(top,  rgb(255,252,252) 0%, rgb(142,185,42) 7%, rgb(114,170,0) 93%, rgb(255,255,255) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,252,252)), color-stop(7%,rgb(142,185,42)), color-stop(93%,rgb(114,170,0)), color-stop(100%,rgb(255,255,255)));
	background: -webkit-linear-gradient(top,  rgb(255,252,252) 0%,rgb(142,185,42) 7%,rgb(114,170,0) 93%,rgb(255,255,255) 100%);
	background: -o-linear-gradient(top,  rgb(255,252,252) 0%,rgb(142,185,42) 7%,rgb(114,170,0) 93%,rgb(255,255,255) 100%);
	background: -ms-linear-gradient(top,  rgb(255,252,252) 0%,rgb(142,185,42) 7%,rgb(114,170,0) 93%,rgb(255,255,255) 100%);
	background: linear-gradient(to bottom,  rgb(255,252,252) 0%,rgb(142,185,42) 7%,rgb(114,170,0) 93%,rgb(255,255,255) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcfc', endColorstr='#ffffff',GradientType=0 );
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.input {
	position: absolute;
	width: 120px;
	height: 15px;
	line-height:15px;
	right: 30px;
	top: 135px;
}

.selector {
	position: absolute;
	width: 15px;
	height: 15px;
	right: 10px;
	top: 135px;
	border: 1px solid red;
}

.ios_buy_direction{
	position: absolute;
	width: 10px;
	height: 10px;
	left: 30px;
	top: 280px;
}
.buy_direction{
	position: absolute;
	width: 10px;
	height: 10px;
	left: 15px;
	top: 115px;
}

.up{
	background:url("../images/arrow_up.png");
}
.down{
	background:url("../images/arrow_down.png");
}

.ios_sell_direction{
	position: absolute;
	width: 10px;
	height: 10px;
	right: 15px;
	top: 280px;
}
.sell_direction{
	position: absolute;
	width: 10px;
	height: 10px;
	right: 15px;
	top: 115px;
}

